<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>路由配置中心</title>
  <link rel="icon" th:href="@{/img/favicon.png}" type="img/x-ico" />
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <!-- Bootstrap 3.3.7 -->
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/fontawesome.min.css" rel="stylesheet">
  <!-- Ionicons -->
  <link href="https://cdn.bootcss.com/ionicons/4.5.6/css/ionicons.min.css" rel="stylesheet">
  
  <!-- Theme style -->
  <link href="https://cdn.bootcss.com/admin-lte/2.4.18/css/AdminLTE.min.css" rel="stylesheet">
  <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
  <link href="https://cdn.bootcss.com/admin-lte/2.4.18/css/skins/_all-skins.min.css" rel="stylesheet">
  <style type="text/css">
	.ivu-table-header table{width:100%!important}
	.ivu-table-body table{width:100%!important}
  </style> 
  <link href="https://cdn.bootcss.com/iview/3.4.1/styles/iview.css"  rel="stylesheet" />
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" ></script>
  <script src="https://cdn.bootcss.com/iview/3.4.1/iview.min.js" ></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper" id="VueApp">
  <header class="main-header">
  </header>
  <!-- Full Width Column -->
  <div class="content-wrapper">
    <div class="container" style="width:95%;">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          <small>{{title}}</small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
          <li><a href="#">{{title}}</a></li>
        </ol>
      </section>

      <!-- Main content -->
    <!-- Main content -->
    <section class="content">
		<!-- Small boxes (Stat box) -->
		<div class="row">
	        <div class="col-md-12">
	        	<div class="box box-primary">
					<div class="box-body">
					  <div class="form-inline">
							<div class="form-group col-sm-4">
								<label class="control-label">App名称：</label>
					           	<input type="text" v-model="searchData.appName"  class="form-control" placeholder=""> 
							</div>
							<div class="form-group col-sm-4">
								<label >Key值：</label>
					           	<input type="text" v-model="searchData.configKey" class="form-control" placeholder=""> 
							</div>
							<div class="form-group col-sm-4 pull-right">
								<button class="form-control col-sm-offset-1 btn btn-info pull-right " @click="searchStart">Search</button>
								<button class="form-control col-sm-offset-1 btn btn-info pull-right "  @click="reset">Reset</button>
							</div>
						</div>
					</div>
				</div>
                <div class="box box-primary">
                    <div class="box-header">
					  <i class="fa fa-envelope"></i>
					  <h3 class="box-title">{{title}}</h3>
					  <!-- tools box -->
					  <div class="pull-right box-tools">
						  <button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip"  @click="refresh" title="刷新"><i class="fa fa-plus"></i> <h3 class="box-title">刷新路由</h3></button>
					  </div>
					</div>
                    
                        <template>
                        <div class="box-body">
						    <i-table :loading="loading" tooltip stripe border show-header :columns="theaders" :data="trows" size="default" @on-sort-change="sortChange">
						    </i-table>
						    <div style="margin: 10px;overflow: hidden">
						    	<div style="float: left;">
						  			<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip"  @click="insertStart" title="新增"><i class="fa fa-plus"></i> 新增</button>
					  			</div>
						        <div style="float: right;">
						            <Page show-total :total="totalRecords" :current="currentPage" @on-change="pageChange"></Page>
						        </div>
						    </div>
						</div>
						</template>
                    
                </div>
            </div>
		</div>
		<!-- /.row -->
		<!-- Modal -->
		<div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增</h4>
					</div>
					<div class="modal-body">
					<form id="insertForm" class="form-horizontal">
					    <div class="form-group">
					        <label class="col-sm-3 control-label">路由ID ：</label>
					        <div class="col-sm-9">
						          <input type="text" id="insert-id" name="insert-id" class="form-control" value="static-picbook" placeholder="如：vip-gateway">
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">Zuul.prefix ：</label>
					        <div class="col-sm-9">
					            <input type="text" id="insert-prefix" name="insert-prefix" class="form-control"  readonly value="/api" >
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">路由PATH ：</label>
					        <div class="col-sm-9">
					            <input type="text" id="insert-path" name="insert-path" class="form-control" value="/static-picbook/**" placeholder="如：/vip/**">
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">去除前缀 ：</label>
							<div class="col-sm-9">
			            	  	<select class="form-control no-padding" id = "insert-stripPrefix" name="insert-input">
			           		  	  	<option value ="1" selected = "selected">是</option>
                                    <option value ="0" >否</option>
                               	</select>
					        </div>
					    </div>
					    					        
					    <div class="form-group">
					        <label class="col-sm-3 control-label">转发类型：</label>
					        <div class="col-sm-9">
					            <label class="col-sm-3 radio-inline">
						            <input type="radio" v-model="insertData.routeType" name="insert-type" value="0" >指定URL</label>
						        <label class="col-sm-3 radio-inline">
						            <input type="radio" v-model="insertData.routeType" name="insert-type" value="1">负载路由</label>
					        </div>
					    </div>
					    <div class="form-group" id="insert-div-url" v-show="insertData.routeType==0?true:false">
					        <label class="col-sm-3 control-label">转发路径：</label>
					        <div class="col-sm-9">
					            <input type="text" id="insert-url" name="insert-url" class="form-control" placeholder="如：http://localhost:8090/vip/">
					        </div>
					    </div>
					    <div class="form-group" id="insert-div-loader" v-show="insertData.routeType==1?true:false">
					        <label class="col-sm-3 control-label">负载策略：</label>
					        <div class="col-sm-9">
			            	  	<select class="form-control no-padding" id = "insert-loader" name="insert-input">
			           		  	  	<option value ="com.netflix.loadbalancer.RoundRobinRule" selected = "selected">RoundRobinRule: 轮询策略</option>
			           		  	  	<option value ="com.netflix.loadbalancer.BestAvailableRule" >BestAvailableRule: 最大可用策略</option>
                                    <option value ="com.netflix.loadbalancer.RetryRule" >RetryRule: 重试策略</option>
                                    <option value ="com.netflix.loadbalancer.RandomRule" >RandomRule: 随机策略</option>
                                    <option value ="com.netflix.loadbalancer.WeightedResponseTimeRule" >WeightedResponseTimeRule: 加权的轮询策略</option>
                                    <option value ="com.netflix.loadbalancer.AvailabilityFilteringRule" >AvailabilityFilteringRule: 可用过滤策略</option>
                                    <option value ="com.netflix.loadbalancer.ZoneAvoidanceRule" >ZoneAvoidanceRule: 区域感知策略</option>
                               	</select>
					        </div>
					    </div>
					    <div class="form-group" id="insert-div-servers" v-show="insertData.routeType==1?true:false">
					        <label class="col-sm-3 control-label">ListServers：</label>
					        <div class="col-sm-9">
					            <input type="text" id="insert-servers" name="insert-servers" class="form-control" value="172.16.55.87:8010,172.16.55.88:8010" placeholder="如：http://localhost:8090,http://localhost:8080">
					        </div>
					    </div>	
					    <div class="form-group">
					        <label class="col-sm-3 control-label">Ping 类型：</label>
					        <div class="col-sm-9">
					            <label class="col-sm-3 radio-inline">
						            <input type="radio"  v-model="insertData.pingType" name="insert-pingType" value="0" >Ping URL</label>
						        <label class="col-sm-3 radio-inline">
						            <input type="radio"  v-model="insertData.pingType" name="insert-pingType" value="1">No Ping</label>
					        </div>
					    </div>
					    <div class="form-group" v-show="insertData.pingType==0?true:false" >
					        <label class="col-sm-3 control-label">PingUrl：</label>
					        <div class="col-sm-9">
					            <input type="text" id="insert-pingUrl" name="insert-pingUrl" class="form-control" value="/picbook/health" placeholder="如：/picbook/health">
					        </div>
					    </div>				    					    
					</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="insertSubmitButton" @click="insertCommit">确认</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">修改</h4>
					</div>
					<div class="modal-body">
						<input type="hidden" v-model="editData.id" id="edit-id" />
						<form id="editForm" class="form-horizontal">
					    <div class="form-group">
					        <label class="col-sm-3 control-label">App名称：</label>
					        <div class="col-sm-9">
					            <input type="text" v-model="editData.appName" readonly class="form-control" placeholder="App名称">
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">key值：</label>
					        <div class="col-sm-9">
					            <input type="text" v-model="editData.configKey" readonly class="form-control" placeholder="key值">
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">value值：</label>
					        <div class="col-sm-9">
					            <input type="text" v-model="editData.configValue" class="form-control" placeholder="value值">
					        </div>
					    </div>
					    <div class="form-group">
					        <label class="col-sm-3 control-label">说明：</label>
					        <div class="col-sm-9">
					            <input type="text" v-model="editData.remarks" class="form-control" placeholder="说明信息">
					        </div>
					    </div>
					    </form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="editSubmitButton" @click="editCommit">确认</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">删除</h4>
					</div>
					<input type="hidden" v-model="deleteData.id" id="delete-id" value=""/>
					<div class="modal-body">
						<p >确认删除该记录 ？{{deleteData.id}}</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="deleteSubmitButton" @click="deleteCommit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing ...">确认</button>
					</div>
				</div>
			</div>
		</div>
    </section>
      <!-- /.content -->
    </div>
    <!-- /.container -->
  </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/admin-lte/2.4.18/js/adminlte.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
var vm = new Vue({
	el:"#VueApp",
	data:{
		title:"ZUUL 网关配置",
		contentUrl:"/admin/route/",
        theaders: [
            {"title": "RouteID",			"key": "id",	  		"width": 50,	"ellipsis":true,"tooltip":true,"sortable": false },
            {"title": "路由URI",				"key": "fullPath",	  	"width": 80,	"ellipsis":true,"tooltip":true,"sortable": true},
            {"title": "zuul.prefix",		"key": "prefix", 		"width": 80,	"sortable": false,
            	render: (h, params) => {
            		var content = params.row.prefix+"\t\t(strip=true)";
            		return h('span',{attrs: {size:"default"}},content);
            	}
            },
            {"title": "route.path",			"key": "path", 			"width": 100,	"sortable": false,
            	render: (h, params) => {
            		var content = params.row.path+"\t\t(strip="+params.row.prefixStripped+")";
            		return h('span',{attrs: {size:"default"}},content);
            	}
            },
            {"title": "retry",			"key": "retryable",			"width": 50,	"ellipsis":true,"tooltip":true,"sortable": false},
            {"title": "负载",				"key": "balancerName",	"width": 50,	"ellipsis":true,"tooltip":true,"sortable": false},
            {"title": "pingName",			"key": "pingClassName",	"width": 80,	"ellipsis":true,"tooltip":true,"sortable": false},
            {"title": "pingUrl",			"key": "pingUrl",		"width": 50,	"ellipsis":true,"tooltip":true,"sortable": false},
            {"title": "servers",			"key": "servers",		"width": 50,	"ellipsis":true,"tooltip":true,"sortable": false},
            {"title": "操作",				"key": "id",			"width": 50,	"sortable": false,
            	render: (h, params) => {
                    return h('div', [
                        h('Icon', {
                        	props: {type: 'ios-create',size: '20'},
                        	on: {click: () => {vm.editStart(params.row)}}
                        }),
                        h('Icon', {
                        	props: {type: 'md-close',size: '20',color:'red'},
                        	on: {click: () => {vm.deleteStart(params.row.id)}}
                        })
                    ]);
                }
            },
        ],
        trows: [
            {
    			"id": "mgm",
    			"fullPath": "/api/mgm/**",
    			"path": "/mgm/**",
    			"location": "mgm",
    			"prefix": "/api",
    			"retryable": false,
    			"sensitiveHeaders": [],
    			"customSensitiveHeaders": false,
    			"prefixStripped": false,
    			"enabled": null,
    			"balancerName": "AvailabilityFilteringRule",
    			"pingUrl": null,
    			"pingClassName": "DummyPing",
    			"servers": "172.16.55.87:8090,172.16.55.88:8090"
            }
        ],
        loading:false,
		totalRecords: 10,
		currentPage: 1,
		searchData:{
			current:1,
			size:10,
			orderBy:"id",
			asc:false,
			appName:"",
			configKey:""
		},
		insertData:{
			"id": "mgm",
			"fullPath": "/api/mgm/**",
			"path": "/mgm/**",
			"location": "mgm",
			"prefix": "/api",
			"retryable": false,
			"sensitiveHeaders": [],
			"customSensitiveHeaders": false,
			"prefixStripped": false,
			"enabled": null,
			"balancerName": "AvailabilityFilteringRule",
			"pingUrl": null,
			"pingClassName": "DummyPing",
			"servers": "172.16.55.87:8090,172.16.55.88:8090"
		},
		editData:{
			id:123123,
			appName:"123",
			configKey:"123123",
			configValue:"123123",
			remarks:"123123"
		},
		deleteData:{
			id:''
		},

	},
	methods: {
		sortChange:function(event){
			vm.orderBy = event.key;
			vm.asc = ("asc"==event.order)?true:false;
			vm.searchData.current=1;
			vm.searchStart();
		},
		pageChange:function(index){
			vm.searchData.current = index;
			vm.searchStart();
		},
		reset:function(){
			vm.searchData.appName = "";
			vm.searchData.configKey = "";
		},
		searchStart:function(){
			vm.loading = true;
			var url = toUrl(vm.contentUrl,vm.searchData);
			axios.get(url)
			  .then(function (response) {
				  vm.loading = false;
				  var success = response.data.success;
				  if(success){
					  vm.totalRecords = response.data.data.total;
					  vm.currentPage = response.data.data.current;
					  vm.trows = response.data.data.records;
					  //alert(JSON.stringify(vm.trows))
				  }else{
					  vm.totalRecords = 0;
					  vm.currentPage = 1;
					  vm.trows=[];
				  }
			  })
			  .catch(function (error) {
				  vm.loading = false;
				  var msg = error.message;
				  vm.$Message.error({content: '查询异常！'+msg,duration: 3});
			  });
		},
		refresh:function(){
			vm.loading = true;
			var url = toUrl(vm.contentUrl+"refresh");
			axios.get(url)
			  .then(function (response) {
				  vm.loading = false;
				  var success = response.data.success;
				  if(success){
					  vm.$Message.info({content: '刷新成功！',duration: 3});
				  }else{
					  vm.$Message.info({content: '新增失败！',duration: 3});
				  }
			  })
			  .catch(function (error) {
				  vm.loading = false;
				  var msg = error.message;
				  vm.$Message.error({content: '查询异常！'+msg,duration: 3});
			  });
		},
		insertStart:function(){
			$("#insertModal").modal("show");
			vm.insertData={};
			//vm.insertData.pingType = 1;
			//vm.insertData.routeType = 0;
		},
		insertCommit:function(){
			//表单验证
		    var validate = $("#insertForm").valid();
		    if(!validate)return;
		    //Ajax调用处理
		    var url = toUrl(vm.contentUrl);
		    axios.post(url,vm.insertData)
			    .then(response=>{
					  $("#insertModal").modal("hide");
					  var success = response.data.success;
					  var msg = response.data.message;
					  if(response.data.success){
						  vm.$Message.info({content: '新增成功！',duration: 3});
					  }else{
						  vm.$Message.warning({content: '新增失败！'+msg,duration: 3});
					  }
					  vm.searchStart();
			    })
				.catch(function (error) {
					  $("#insertModal").modal("hide");
					  var msg = error.response.data.message;
					  vm.$Message.error({content: '新增异常！'+msg,duration: 10});
				});
		},
		editStart:function(entity){
			$("#editModal").modal("show");
			vm.editData = JSON.parse(JSON.stringify(entity)); 
		},
		editCommit:function(){
			//表单验证
		    var validate = $("#editForm").valid();
		    if(!validate)return;
		    //Ajax调用处理
		    var url = toUrl(vm.contentUrl+vm.editData.id);
		    axios.put(url,vm.editData)
			    .then(response=>{
					  $("#editModal").modal("hide");
					  var success = response.data.success;
					  var msg = response.data.message;
					  if(response.data.success){
						  vm.$Message.info({content: '修改成功！',duration: 3});
					  }else{
						  vm.$Message.warning({content: '修改失败！'+msg,duration: 3});
					  }
					  vm.searchStart();
			    })
				.catch(function (error) {
					  $("#editModal").modal("hide");
					  var msg = error.message;
					  vm.$Message.error({content: '修改异常！'+msg,duration: 3});
				});
		},
		deleteStart:function(id){
			vm.deleteData.id = id;
			$("#deleteModal").modal("show");
		},
		deleteCommit:function(){
			var url = toUrl(vm.contentUrl+vm.deleteData.id);
			axios.delete(url)
			  .then(function (response) {
				  $("#deleteModal").modal("hide");
				  var success = response.data.success;
				  var msg = response.data.message;
				  if(response.data.success){
					  vm.$Message.info({content: '删除成功！',duration: 3});
				  }else{
					  vm.$Message.warning({content: '删除失败！'+msg,duration: 3});
				  }
				  vm.searchStart();
			  })
			  .catch(function (error) {
				  $("#deleteModal").modal("hide");
				  var msg = error.message;
				  vm.$Message.error({content: '删除异常！'+msg,duration: 3});
			  });
		}
	}
});

$(function(){ 
	vm.searchStart();
})
function toUrl(url, params){
    var paramsArr = [];
    if (params) {
     	for ( var item in params){
     		var value = params[item];
        	if(value===false || value===0 || value){
        		paramsArr.push(item + '=' + value);
        	}
   		}
        if (url.search(/\?/) === -1) {
            url += '?' + paramsArr.join('&');
        } else {
            url += '&' + paramsArr.join('&');
        }

    }
    return encodeURI(url);
}
</script>
</body>
</html>
